<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'

interface chartData {
  name: string
  value: number
  ratio: number
}

const props = defineProps<{
  data: chartData[];
  // 是否展示图表下面的数据列表
  showItem: boolean,
  height?: string,
  width?: string,
  color?: string[]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || ['rgba(63, 177, 227, 1)', 'rgba(107, 230, 193, 1)'];

const options = computed(() => {
  let opt = {
    animation: false,
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['62%', '90%'],
        center: ['50%', '65%'],
        padAngle: 1,
        startAngle: 180,
        endAngle: 360,
        itemStyle: {
          borderRadius: 2
        },
        label: {
          show: false,
        },
        data: props.data,
        color,
      }
    ]
  }
  return opt;
})

</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
    <div class="zcgk-b-total">
      <p class="total-value">{{ props.data[0].ratio }}%</p>
      <p class="total-name">{{ props.data[0].name }}</p>
    </div>
    <div class="zcgk-b-info" v-show="props.showItem">
      <div class="zcgk-b-info-item" v-for="(item, index) in props.data" :key="index">
        <div class="icon" :style="{ background: `${color[index]}` }"></div>
        <div class="con">
          <p class="info-item-name">{{ item.name }}</p>
          <p class="info-item-value">{{ item.value }}<span>个</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .zcgk-b-total {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    color: rgba(69, 69, 69, 1);
    .total-value {
      font-size: 32px;
      font-weight: 700;
      height: 62px;
      line-height: 62px
    }
    .total-name {
      font-size: 20px;
      font-weight: 500;
    }
  }
  .zcgk-b-info {
    position: absolute;
    left: 14%;
    top: 70%;
    width: 76%;
    height: 58px;
    display: flex;
    justify-content: space-between;
    .zcgk-b-info-item {
      width: 120px;
      height: 58px;
      position: relative;
      display: flex;
      justify-content: space-between;
      .icon {
        width: 14px;
        height: 14px;
        margin: 10px 16px 0 0;
        border-radius: 5px;
      }
      .con {
        flex: 1;
        height: 100%;
        .info-item-name {
          font-size: 16px;
          font-weight: 400;
          color: #000000;
          font-family: DINPro;
          height: 24px;
        }
        .info-item-value {
          font-size: 24px;
          font-weight: 600;
          color: #000000;
          font-family: DINPro;
          height: 28px;
          line-height: 28px;
          span {
            display: inline-block;
            font-size: 20px;
            font-weight: 500;
            padding-left: 3px;
          }
        }
      }
    }
  }
}
</style>